<template>
  <div class="mx-layer-svg">
    <svg 
      v-show="currentVisible" 
      :style="currentSvgStyle" 
      :viewbox="currentViewbox">
      <mx-marker
        v-for="(marker, index) in currentSources"
        :key="index"
        :prop="marker"
        :name="name"
        :layer="layer"
        :map="map"
        :options="options"
        :sources="sources"
        :zoom="zoom"
        :category="category"
        :activeLayerList="activeLayerList"
        @created="onCreate"
      />
    </svg>
    <div 
      v-show="currentVisible" 
      class="mx-layer-tagging">
      <mx-tagging 
        v-for="(instance, index) in instances"
        :context="instance"
        :key="index"/>
    </div>
  </div>
</template>

<script>
import basic from "./basic.vue";
import mxTagging from '../tagging/index.vue'
const WIDTH = 1000;
const HEIGHT = 1000;

export default {
  extends: basic,
  components: {
    mxTagging
  },
  data() {
    return {
      instances: []
    }
  },
  methods: {
    onCreate(context) {
      this.instances.push(context)
    }
  },
  computed: {
    currentSvgStyle() {
      return {
        position: "absolute",
        width: window.innerWidth + WIDTH + "px",
        height: window.innerHeight + HEIGHT + "px",
        left: -WIDTH / 2 + "px",
        top: -HEIGHT / 2 + "px"
      };
    },
    currentViewbox() {
      let width = window.innerWidth + WIDTH;
      let height = window.innerHeight + HEIGHT;
      return `0 0 ${width} ${height}`;
    }
  }
};
</script>

<style type="text/stylus" lang="stylus" rel="stylesheet/stylus">
.mx-layer-svg {
  position: absolute;
  width: 0;
  left: 0;
  height: 0;
  top: 0;
  overflow: visible;
  z-index: 10;
}
.mx-layer-tagging {
  position: absolute;
  user-select: none;
}
</style>
